<template>
<div id="Publicstore">
  <div style="height: 1rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; border-bottom: 1px solid #ccc;">
    <van-button type="primary" size="small" @click="showBlank">申请出库</van-button>     
    <van-button type="primary" size="small" @click="showJilu">申请记录</van-button>     
    <van-button type="primary" size="small" @click="shebei.showBlank">查看设备</van-button>     
  </div>
  <div class="flex-body">
    <div style="line-height: 1.2rem; text-align: center; font-size: 0.4rem; font-weight: 600;">充电宝数：{{ info.chargerCount }}</div>
    <div style="line-height: 1.2rem; text-align: center; font-size: 0.4rem; font-weight: 600;">设备数：{{ info.terminalCount }}</div>
  </div>  
    
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar :title="blank.name" left-arrow @click-left="blank.show = false"/>
      <div class="flex-body">   
        <van-cell-group>  
          <van-field v-model.trim="blank.info.equipmentNumber"  required label="机柜数" placeholder="请输入机柜数"/>
          <van-field v-model.trim="blank.info.chargerNumber"    required label="充电宝数" placeholder="请输入充电宝数"/>
          <van-button round type="info" size="small" :loading="submitLoading" @click="submit">提交</van-button>
        </van-cell-group>
      </div>
    </div>
  </van-popup>
    
  <van-popup v-model="jilu.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="申请记录" left-arrow @click-left="jilu.show = false"/>
      <van-tabs style="flex-shrink: 0;" @change="jilu.onSearch()" v-model="jilu.active" inverse indicator-color="#2196F3" color="#2196F3" 
        text-color="rgba(0, 0, 0, 0.54)" center :swipe-threshold="5">
        <van-tab title="待出库"></van-tab>
        <van-tab title="已出库"></van-tab>
      </van-tabs>
      <div class="flex-body">   
        <van-list v-model="jilu.loading" :finished="jilu.finished" finished-text="没有更多了" @load="jilu.getList">
          <div class="tongji-box" v-for="(item, index) in jilu.list" :key="index">
            <div class="tongji-item">
              <div class="tongji-row">
                <div>申请时间：</div>
                <div>{{ item.createTime }}</div>
              </div>
              <div class="tongji-row">
                <div>操作：</div>
                <van-button round type="primary" size="small" @click.stop="quxiao( item )">取消</van-button>
              </div>
              <div class="tongji-row">
                <div>机柜数：</div>
                <div>{{ item.equipmentNum }}</div>
              </div>
              <div class="tongji-row">
                <div>充电宝数：</div>
                <div>{{ item.chargerNum }}</div>
              </div>
              <div class="tongji-row">
                <div>业务员：</div>
                <div>{{ item.salesmanName }}</div>
              </div>
              <div class="tongji-row">
                <div>业务员编号：</div>
                <div>{{ item.salesmanId }}</div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </van-popup>

  <van-popup v-model="shebei.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="设备详情" left-arrow @click-left="shebei.show = false"/>
      <van-tabs style="flex-shrink: 0;" @change="shebei.change()" v-model="shebei.active" inverse indicator-color="#2196F3" color="#2196F3" 
        text-color="rgba(0, 0, 0, 0.54)" center :swipe-threshold="5">
        <van-tab title="机柜"></van-tab>
        <van-tab title="充电宝"></van-tab>
      </van-tabs>
      <div class="flex-body" v-if="shebei.active == 1">
        <van-list v-model="shebei.loading" :finished="shebei.finished" finished-text="没有更多了" @load="shebei.getList">
          <div class="tongji-box" v-for="(item, index) in shebei.list" :key="index">
            <div class="tongji-item">
              <div class="tongji-row">
                <div>设备编号：</div>
                <div>{{ item.sn }}</div>
              </div>
              <div class="tongji-row">
                <div>来源：</div>
                <div>{{ item.inReason }}</div>
              </div>
              <div class="tongji-row">
                <div>时间：</div>
                <div>{{ item.createTime }}</div>
              </div>
              <div class="tongji-row" style="height: auto;">
                <div>二维码：</div>
                <div style="width: 50px; height: 50px; margin: 10px 0;" :id="'qrcode' + index" @click="lookDetail( item )"></div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="flex-body" v-else>
        <div class="tongji-box" v-for="(item, index) in shebei.list" :key="index">
          <div class="tongji-item">
            <div class="tongji-row">
              <div>设备编号：</div>
              <div>{{ item.sn }}</div>
            </div>
            <div class="tongji-row">
              <div>来源：</div>
              <div>{{ item.inReason }}</div>
            </div>
            <div class="tongji-row">
              <div>时间：</div>
              <div>{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>

  <van-popup v-model="codeshow">
    <div style="width: 100%; height: 100%;">
      <div style="width: 300px; height: 300px;" id="qrcode" v-if="codeshow"></div>
    </div>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
declare const QRCode: any;

@Component
export default class Publicstore extends Vue {

  statusName: any = [ '审批中', '已同意', '未同意' ]

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''
  
  getList() {
    let page = this.page, size = 10, userId = this.$store.state.userInfo.userId;
    axios.get('/api/bjk/bjkList', {
      page, size, userId, type: 1
    }).then((res: any) => {
      let json = res || {};
      let list = json.list || [];
      this.page = page + 1;
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }

  submitLoading: any = false
  blank: any = {
    show: false,
    name: '出库申请',
    info: {}
  }
  showBlank() {
    this.blank.name = '出库申请';
    this.blank.info = {};
    this.blank.show = true;
  }
  submit() {
    if( this.submitLoading ) return ;
    let numReg = /^([0-9]|[1-9][0-9]*)$/;
    this.submitLoading = true;
    if( !this.blank.info.equipmentNumber || !numReg.test( this.blank.info.equipmentNumber ) ) return this.$toast('请正确填写机柜数');
    if( !this.blank.info.chargerNumber || !numReg.test( this.blank.info.chargerNumber ) ) return this.$toast('请正确填写充电宝数');    
    axios.post('/api/bjk/apply', { 
      query: { terminalNum: this.blank.info.equipmentNumber, chargerNum: this.blank.info.chargerNumber } 
    }).then((res: any) => {
      this.submitLoading = false;
      this.blank.show = false;
      this.list = [];
      this.page = 1;
      this.finished = false;
      this.getList();
    }).catch(() => {
      this.submitLoading = false;
    });
  }

  jilu: any = {
    active: 0,
    show: false,
    list: [],
    page: 1,
    loading: false,
    finished: false,
    getList: () => {
      let page = this.jilu.page, size = 10;
      let applyStatus = this.jilu.active;
      axios.get('/api/bjk/applyList', { page, size, applyStatus }).then((res: any) => {
        if ( this.jilu.page != page ) return ;
        this.jilu.page = page + 1;
        let json = res || {}; 
        let list = json.list || [];
        this.jilu.loading = false;
        this.jilu.list.push( ...list );
        if( json.isLastPage ) this.jilu.finished = true;
      }).catch((err: any) => {
        this.jilu.loading = false;
        this.jilu.finished = true;
      });
    },
    onSearch: () => {
      this.jilu.list = [];
      this.jilu.loading = true;
      this.jilu.finished = false;
      this.jilu.page = 1;
      this.jilu.getList();
    }
  }
  showJilu() {
    this.jilu.list = [];
    this.jilu.loading = true;
    this.jilu.finished = false;
    this.jilu.page = 1;
    this.jilu.show = true;
    this.jilu.getList();
  }
  quxiao(item: any) {
    this.$dialog.confirm({ 
      message: `确定要取消这条出库申请的记录吗？`,       
    }).then(() => {
      axios.post(`/api/bjk/cancelApply`, { query: { applyId: item.id } }).then((res: any) => {
        this.$toast('取消成功');
        this.showJilu();
      });
    })
  }
  
  shebei: any = {
    show: false,
    active: 0,

    list: [],
    page: 1,
    loading: false,
    finished: false,

    showBlank: (item: any) => {
      this.shebei.active = 0;
      this.shebei.show = true;
      this.shebei.change();
    },
    change: () => {
      this.shebei.list = [];
      this.shebei.page = 1;
      this.shebei.loading = true;
      this.shebei.finished = false;
      this.shebei.getList();
      if ( this.shebei.active == 1 ) {
        this.$nextTick(() => {
          this.shebei.list.forEach((ele: any, index: any) => {
            new QRCode('qrcode' + index, { width: 50, height: 50, text: ele.sn });
          });
        });
      }
    },
    getList: () => {
      let page = this.shebei.page, size = 600, shopId = this.shebei.shopId;
      let query: any = { page, size, userId: this.$store.state.userInfo.userId, type: this.shebei.active + 1 };
      this.shebei.loading = true;
      axios.get('/api/bjk/bjkList', query).then((res: any) => {
        let json = res || {};
        let list = json.list || [];
        this.shebei.page = page + 1;
        this.shebei.loading = false;
        this.shebei.list.push( ...list );
        if( json.isLastPage ) this.shebei.finished = true;
      }).catch((err: any) => {
        this.shebei.loading = false;
        this.shebei.finished = true;
      });
    }
  }
  codeshow: any = false
  lookDetail(item: any) {
    this.codeshow = true;
    this.$nextTick(() => {
      new QRCode('qrcode', { width: 300, height: 300, text: item.sn });
    });
  }  

  info: any = { terminalCount: 0, chargerCount: 0 }
  mounted() {
    axios.get('/api/bjk/bjkCount', { page: 1, size: 10 }).then((res: any) => {
      let json = res || {};
      let list = json.list || [];
      if ( list.length ) { this.info = list[0]; }
    });
  }
};
</script>

<style lang="scss">
#Publicstore {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; 
}
</style>

